<template>
 
   <div id="previewMain">
    <div 
      class="flag-tip"
      v-if="formData.formData!=null&&(formData.formData.auditflag=='审核通过'||formData.formData.auditflag=='审核失败'||formData.formData.auditflag=='未审核'||formData.formData.auditflag=='审核中')"
      :class="(formData.formData!=null&&(formData.formData.auditflag=='审核通过'||formData.formData.auditflag=='未审核'||formData.formData.auditflag=='审核中')) ? 'bgGreen' : (formData.formData!=null&&(formData.formData.auditflag=='审核失败')) ? 'bgRed' : ''"
    >
      {{formData.formData.auditflag}}
      <span class="error-detail" v-if="formData.formData.auditflag=='审核失败'" @click="centerDialogVisible = true">
        ! 点此查看详情
      </span>

    </div>
    <previewpage ref="previewPagemain" :postData="postData" :propsData="propsData" @initFrom="initFrom"></previewpage>
    <el-dialog
      title="审核详情"
      :visible.sync="centerDialogVisible"
      width="90%"
      :show-close="showClose"
      center>
      <span v-if="formData.formData!=null && formData.formData.auditremark">{{formData.formData.auditremark}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="centerDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import previewpage from '@/views/index.vue'
import { apiComm } from '@/api/index.js'
export default {
  data () {
    return {
      showClose: false,
      centerDialogVisible: false,
      js: '',
      css: '',
      html: '',
      propsData: {},
      today: new Date(),
      watchflag :false,
      formData:{ formData:{auditflag:'初始化'}},
      postData: {
        type: 'refreshFrame',
        data: {
          generateConf: {
            fileName: '测试',
            type: 'file'
          },
          html: this.html,
          js: '{}',
          css: this.css,
          scripts: [],
          links: [],
          openId:'',
          formInfo:{}
        }
      }
    }
  },
  components: { previewpage },
  methods: {
    liulanfrom () {

      if(localStorage.getItem("openId")==null)
      {
        this.$router.push({ path: "/"});
        return false;
      }

      const fromid = localStorage.getItem("projectId");

      
      this.postData.formInfo = JSON.parse(localStorage.getItem("formInfo"));
      
      if (fromid === undefined || fromid === null) {
        this.$message.error('表单ID找不到！')
        this.$router.push({ path: "/"});
        return false
      }
      apiComm('tappFrom.getFromContent', { fid: fromid }).then(res => {
        if (res.code === 0) {
         
          this.today = res.curDate;
          if (res.data.length === 0) {
            this.$message.error('找不到表单信息，可能表单已删除！')
            this.$router.push({ path: "/"});
            return
          }
          const fromcontent = JSON.parse(res.data[0].fromcontent)
          this.js = fromcontent.js
          this.css =
            fromcontent.css !== false
              ? fromcontent.css + fromcontent.systemcss
              : fromcontent.systemcss
          this.propsData.IsPower = '1'
          this.postData.openId = localStorage.getItem("openId")
          this.html = fromcontent.html
          this.postData.data.css = this.css
          this.postData.data.html = this.html
          this.postData.data.js = this.js.replace('export default', '')
          this.$refs.previewPagemain.previewinit(this.postData)

          
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    initFrom (from) {
      this.from = from

      const fromdata = from.data()

      fromdata.deviceMode = 'dialog'
      fromdata.dialogclose = this.dialogclose
      function data () {
        return fromdata
      }
      window.hideButton = function()
      {
          var buttonDiv = document.getElementsByClassName('el-button');
         
          if(buttonDiv.length==0)
          {
            setTimeout("hideButton()", 100 );
      
          }
          else{
            buttonDiv[0].parentNode.style.display='none'; 
            //buttonDiv[0].style.display='none'; 
          }

      }
      window.showButton = function()
      {
          var buttonDiv = document.getElementsByClassName('el-button');
         
          if(buttonDiv.length==0)
          {
            setTimeout("showButton()", 100 );
      
          }
          else{
            buttonDiv[0].parentNode.style.display=''; 
            //buttonDiv[0].style.display='none'; 
          }

      }
      this.formData = fromdata;
      this.from.data = data
      window.onresize = () => {
        const docWidth = document.body.clientWidth
        if (docWidth < 1024) {
          fromdata.deviceMode = 'Mobile'
        } else {
          fromdata.deviceMode = 'pc'
        }
      }
      const docWidth2 = document.body.clientWidth
      if (docWidth2 < 1024) {
        fromdata.deviceMode = 'Mobile'
      } else {
        fromdata.deviceMode = 'pc'
      }
      
    }
  },
  created () {
    this.liulanfrom()
  },
  watch: {
    'formData.formData.auditflag'(newVal, oldVal) {
      console.log('(newVal:',newVal+'@')
      console.log('(oldVal:',oldVal+'@')

      //如果审核通过
      if((oldVal=='初始化'||oldVal=='')&&(newVal=='审核通过'||newVal=='审核中'||newVal=='待确认'))
      {
        this.watchflag = true;
        hideButton();
      }
     
      if((oldVal=='初始化'||oldVal=='')&&(newVal=='未填报'||newVal==''))
      {
        
        let that = this;
        setTimeout(function(){
          
         
          if(that.watchflag==false)
          {
            const formInfo = JSON.parse(localStorage.getItem("formInfo"));

            let startDate = formInfo.startDate;
            let endDate = formInfo.endDate;

            //项目不启用或不在日期范围内
            if(formInfo.isInput!='启用'||startDate>that.today||endDate<that.today)
            {
              hideButton();
              swal({
                  title: '已截止',
                  text: '当前项目已截止，不允许再提交',
                  button: {
                    text: "确认",
                    closeModal: true,
                  }
                })
            }
          }

        },1500)
      }
      else if((oldVal=='初始化'||oldVal=='')&&newVal!='')
      {
          this.watchflag = true;
          if(newVal=='未审核')
          {
            if(localStorage.getItem("projectId")==109)
            {
              swal({
                title: newVal,
                text: '当前数据还未审核，请务必于2月6日扫描二维码查看报名审核结果及考试安排，考试安排不再另行通知。',
                button: {
                  text: "确认",
                  closeModal: true,
                }
              })
            }else{
              swal({
                title: newVal,
                text: '当前数据还未审核，请耐心等待',
                button: {
                  text: "确认",
                  closeModal: true,
                }
              })
            }
            const formInfo = JSON.parse(localStorage.getItem("formInfo"));
            let startDate = formInfo.startDate;
            let endDate = formInfo.endDate;
            
            //项目不启用或不在日期范围内
            if(formInfo.isInput!='启用'||formInfo.isModify=='否'||startDate>this.today||endDate<this.today)
            {
              hideButton();
            }
            
          }else if(newVal=='审核中'||newVal=='待确认')
          {
            if(localStorage.getItem("projectId")==109)
            {
              swal({
                title: newVal,
                text: '当前数据已在审核，请务必于2月6日扫描二维码查看报名审核结果及考试安排，考试安排不再另行通知。',
                button: {
                  text: "确认",
                  closeModal: true,
                }
              })
            }else{
              swal({
                title: newVal,
                text: '当前数据已在审核，请稍候',
                button: {
                  text: "确认",
                  closeModal: true,
                }
              })
            }
          }else if(newVal=='审核通过')
          {
            if(localStorage.getItem("projectId")==null)
            {
              setTimeout(function(){
                      if(localStorage.getItem("projectId")==109)
                      {
                        swal({
                          title: newVal,
                          text: '您的报名审核已通过，请登录杭州考试院官网查看考试按排信息。',
                          icon: "success",
                          button: {
                            text: "确认",
                            closeModal: true,
                          }
                        })
                      }else{
                        swal({
                          title: newVal,
                          text: '您的数据已审核通过，请及时缴费',
                          icon: "success",
                          button: {
                            text: "确认",
                            closeModal: true,
                          }
                        })
                      }
              },100)
            }
            else
            {
              if(localStorage.getItem("projectId")==109)
              {
                swal({
                  title: newVal,
                  text: '您的报名审核已通过，请登录杭州考试院官网查看考试按排信息。',
                  icon: "success",
                  button: {
                    text: "确认",
                    closeModal: true,
                  }
                })
              }else{
                swal({
                  title: newVal,
                  text: '您的数据已审核通过，请及时缴费',
                  icon: "success",
                  button: {
                    text: "确认",
                    closeModal: true,
                  }
                })
              }
            }
          }else if(newVal=='审核失败')
          {
            let that = this
            const formInfo = JSON.parse(localStorage.getItem("formInfo"));
            let startDate = formInfo.startDate;
            let endDate = formInfo.modifyEndDate;

            let today = new Date();
            //项目不启用或不在日期范围内
            
            if(formInfo.isInput!='启用'||formInfo.isModify=='否'||startDate>this.today||endDate<this.today)
            {
              hideButton();
            }
            if(localStorage.getItem("projectId")==109)
            {
              swal({
                title: newVal,
                text: '你不符合报名条件，如有疑问可于2月7日16时前致电杭州市教育考试院，联系电话85866679。',
                icon: "error",
                button: {
                  text: "确认",
                  closeModal: true,
                }
              }).then(name => {
                that.centerDialogVisible = true
                
              })
            }else
            {
              swal({
                title: newVal,
                text: '您的数据审核未通过，确认后查看详情',
                icon: "error",
                button: {
                  text: "确认",
                  closeModal: true,
                }
              }).then(name => {
                that.centerDialogVisible = true
                
              })              
            }
          }
      }

    }, 
  }
}
</script>
<style scoped>
#previewMain {
  padding-left: 10px;
}
.flag-tip{
  height: 32px;
  line-height: 32px;
  text-align: center;
}
.bgGreen{
  background-color: #f0f9eb;
  color: #67c23a;
}
.bgRed{
  background-color: #fef0f0;
  color: #f56c6c;
}

</style>
